import React from 'react';
import { IndustryC, PrimaryC, FirstHeaderC, SecondHeaderC } from '@/comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

class IndustryDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      init2: undefined,
      init4: undefined,
    };
    setTimeout(() => {
      this.setState({
        init2: '460000',
        init4: ['720000', '460000'],
      });
    }, 3000);
  }
  onClick1 = () => {
    this.state.IndustryC1.setSelect('720000');
  };
  onClick11 = () => {
    this.state.IndustryC11.setSelect('720000');
  };
  onClick2 = () => {
    this.state.IndustryC2.setSelect('720000');
  };
  onClick3 = () => {
    this.state.IndustryC3.setSelect(['720000']);
  };
  onClick31 = () => {
    this.state.IndustryC31.setSelect(['720000']);
  };
  onClick4 = () => {
    this.state.IndustryC4.setSelect(['410000', '110000']);
  };
  render() {
    return (
      <div style={{ padding: '20px', width: '500px' }}>
        <FirstHeaderC title='单选模式' />
        <SecondHeaderC title='1.同步初始化,1层树形结构' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry1'
          multiple={false}
          onRef={(ref) => this.setState({ IndustryC1: ref })}
          initialValue={'420000'}
          onChange={(e) => console.log(e)}
          isTree={true}
          treeNode={1}
        />
        <SecondHeaderC title='1.1同步初始化,2层树形结构' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry111'
          multiple={false}
          onRef={(ref) => this.setState({ IndustryC111: ref })}
          initialValue={'420300'}
          onChange={(e) => console.log(e)}
          isTree={true}
          treeNode={2}
        />
        <SecondHeaderC title='1.22同步初始化,3层树形结构' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry222'
          multiple={false}
          onRef={(ref) => this.setState({ IndustryC111: ref })}
          initialValue={'420000'}
          onChange={(e) => console.log(e)}
          isTree={true}
          treeNode={3}
        />
        <SecondHeaderC title='1.2 同步初始化,1级数据，非树形结构' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry11'
          multiple={false}
          onRef={(ref) => this.setState({ IndustryC11: ref })}
          initialValue={'420000'}
          onChange={(e) => console.log(e)}
          isTree={false}
          treeNode={1}
        />
        <PrimaryC onClick={this.onClick11} title='更改数据' />
        <SecondHeaderC title='1.3同步初始化,2级数据，非树形结构' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry12'
          multiple={false}
          onRef={(ref) => this.setState({ IndustryC12: ref })}
          initialValue={'420300'}
          onChange={(e) => console.log(e)}
          isTree={false}
          treeNode={2}
        />
        <SecondHeaderC title='1.3同步初始化,3级数据，非树形结构' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry13'
          multiple={false}
          onRef={(ref) => this.setState({ IndustryC13: ref })}
          initialValue={'420301'}
          onChange={(e) => console.log(e)}
          isTree={false}
          treeNode={3}
        />
        <SecondHeaderC title='2.异步初始化' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry2'
          multiple={false}
          onRef={(ref) => this.setState({ IndustryC2: ref })}
          initialValue={this.state.init2}
          onChange={(e) => console.log(e)}
        />
        <PrimaryC onClick={this.onClick2} title='更改数据' />

        <FirstHeaderC title='多选模式' />
        <SecondHeaderC title='3.树形同步初始化' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry3'
          onRef={(ref) => this.setState({ IndustryC3: ref })}
          initialValue={['420000', '460000']}
          onChange={(e) => console.log(e)}
        />
        <PrimaryC onClick={this.onClick3} title='更改数据' />
        <SecondHeaderC title='3.1非树形同步初始化' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry31'
          onRef={(ref) => this.setState({ IndustryC31: ref })}
          initialValue={['420000', '460000']}
          onChange={(e) => console.log(e)}
          isTree={false}
          treeNode={1}
        />
        <PrimaryC onClick={this.onClick31} title='更改数据' />
        <SecondHeaderC title='4.异步初始化' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry4'
          onRef={(ref) => this.setState({ IndustryC4: ref })}
          initialValue={this.state.init4}
          onChange={(e) => console.log(e)}
        />
        <PrimaryC onClick={this.onClick4} title='更改数据' />

        <FirstHeaderC title='其他设置' />
        <SecondHeaderC title='5.设置rules、helper、权限、layout' />
        <IndustryC
          form={this.props.form}
          dataIndex='industry5'
          rules={[{ required: true, message: '请选择组合!' }]}
          helper='lalal'
          authority={'write'}
          allowClear={true}
          formItemLayout={{
            labelCol: {
              span: 8,
              offset: 2,
            },
            wrapperCol: {
              span: 12,
              offset: 2,
            },
          }}
        />
        <SecondHeaderC title='6.显示checkbox' />
        <IndustryC form={this.props.form} dataIndex='industry6' helper='lalal' onChange={(e) => console.log(e)} treeCheckable={true} />
      </div>
    );
  }
}

export default Form.create()(IndustryDemo);
